<template>
  <div>
    <van-nav-bar
      title="城市列表"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-index-bar :index-list="newlist">

      <van-index-anchor index="#">
        当前城市
        <van-cell :title="$store.state.hotcity.label" />
      </van-index-anchor>

      <van-index-anchor index="热">
        热门城市
        <van-cell v-for="(item,index) in hotcity" :key="item.short" :title="item.label" @click="hot(index)" />
      </van-index-anchor>

      <van-index-anchor v-for="arr in indexList" :key="arr.label" :index="arr">
        {{ arr }}
        <van-cell v-for="val in citylist.filter(item=>item.short[0].toUpperCase()===arr)" :key="val.value" :title="val.label" />
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
import { getCity, hotCity } from '@/api/home.js'
// import { setStorage } from '@/utils/storage.js'

export default {
  data() {
    return {
      citylist: [],
      hotcity: [],
      newlist: [],
      cityId: [],
      indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    }
  },
  computed: {

  },

  created() {
    this.getCity()
    this.gethotCity()
  },
  mounted() {

  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    async getCity() {
      const res = await getCity(1)
      // console.log(res.data.body)
      this.citylist = res.data.body
      this.indexList = [...new Set(res.data.body.map(item => item.short[0].toUpperCase()))].sort()
      this.newlist.push(...['#', '热', ...this.indexList])
      // console.log(this.newlist.push(...['#', '热', ...this.indexList]))
      // 获取城市id
      res.data.body.forEach(item => {
        // console.log(item)
        this.cityId.push(item.value)
      })
    },
    async gethotCity() {
      const res = await hotCity()
      console.log(res.data)
      this.hotcity = res.data.body
    },
    hot(index) {
      // console.log(123)
      // console.log(this.hotcity[index].label)
      // this.$store.commit('initCity', this.hotcity[index].label)
      this.$store.commit('initCity', this.hotcity[index])
      console.log(this.$store.state.city)
      this.$store.commit('newcity')
      this.$router.back()
    }
  }
}
</script>

<style scoped lang='less'>
/deep/.van-icon{
  color: #fff;
}
.van-nav-bar{
  background-color: rgb(33, 185, 122) ;
}
/deep/.van-nav-bar__title{
  color: #fff;
}
/deep/.van-nav-bar__arrow{
  color: #fff !important;
}
</style>
